import 'dart:collection';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_nfmovies/model/nf_home_info_model.dart';
import 'package:flutter_nfmovies/net/dio_util.dart';
import 'package:flutter_nfmovies/util/cache_util.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:html/parser.dart';

import 'mf_video_info_page.dart';

class NfHomeItemWidget extends StatelessWidget {
  final NfHomeInfoModel data;
  final ScrollController scrollController;

  const NfHomeItemWidget({Key key, this.data, this.scrollController})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    TextStyle topTextStyle = TextStyle(
        color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18.sp);
    return Container(
      decoration:
          BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10.r))),
      // color: Colors.transparent,
      // elevation: 0,
      margin: EdgeInsets.symmetric(horizontal: 8.0.w),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '${data.title}',
                    style: topTextStyle,
                  ),
                  InkWell(
                    onTap: () {
                      // Navigator.push(
                      //     context,
                      //     MaterialPageRoute(
                      //         builder: (
                      //       _,
                      //     ) {}));
                    },
                    child: Text('${data.subTitle}',
                        style: topTextStyle.copyWith(
                            fontSize: 16.sp,
                            fontWeight: FontWeight.normal,
                            color: Colors.white54)),
                  ),
                ],
              ),
            ),
            Flexible(
                fit: FlexFit.loose,
                child: Container(
                  color: Colors.transparent,
                  height: 150.h,
                  child: ListView.separated(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (_, index) {
                        var item = data.data[index];
                        return InkWell(
                          onTap: () {
                            DioUtil.instance.get<String>('${item.url}',
                                (response) {
                              var body = parse(response).body;
                              var detail = body
                                  .querySelector('div.myui-content__detail');
                              var detailSummary = detail
                                      ?.querySelector(
                                          'p.desc.text-collapse.hidden-xs')
                                      ?.text
                                      ?.trim() ??
                                  '';

                              item.summary = detailSummary;

                              var plays = body.querySelector(
                                  'ul.myui-content__list.sort-list.clearfix');
                              var list = [];
                              plays.querySelectorAll('a').forEach((element) {
                                var hashMap = new HashMap<String, String>();
                                hashMap['url'] = 'https://www.nfmovies.com' +
                                    element.attributes['href'];
                                hashMap['title'] = element.text;
                                list.add(hashMap);
                              });
                              item.playAddress = list;

                              return Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (_) => MFVideoInfoPage(
                                      model: item,
                                    ),
                                  ));
                            },
                                (code, message) =>
                                    print('code:$code, message: $message}'));
                          },
                          onDoubleTap: () => null,
                          child: Hero(
                            tag: '${item.img}',
                            child: Container(
                                height: 160.h,
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(10.r)),
                                    color: Colors.white),
                                clipBehavior: Clip.antiAlias,
                                child: Stack(
                                  children: [
                                    CacheUtil.cacheImage(
                                      '${item.img}',
                                      fit: BoxFit.fitHeight,
                                      // width: double.infinity,
                                      height: 150.h,
                                    ),
                                    Positioned(
                                      bottom: 0,
                                      left: 0,
                                      right: 0,
                                      child: Container(
                                        height: 15.h,
                                        color: Colors.black38,
                                        padding: EdgeInsets.symmetric(
                                            horizontal: 2.w),
                                        alignment: Alignment.center,
                                        child: Text(
                                          '${item.title}',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 12.sp),
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                        ),
                                      ),
                                    ),
                                    Positioned(
                                      top: 2.h,
                                      right: 2.w,
                                      child: Container(
                                        width: 50.w,
                                        alignment: Alignment.centerRight,
                                        child: Text(
                                          '${item.score?.trim() ?? ''}',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 10.sp),
                                        ),
                                      ),
                                    ),
                                  ],
                                )),
                          ),
                        );
                      },
                      separatorBuilder: (_, index) => SizedBox(
                            width: 10.w,
                          ),
                      itemCount: data.data?.length ?? 0),
                ))
          ],
        ),
      ),
    );
  }
}
